<template>
<div>
  <el-col :span="3">
        <span>品类筛选：</span>
      </el-col>
  <el-select v-model="cate" placeholder="请选择" :span='7' @change='change'>
    <el-option
      v-for="item in cates"
      :key="item.id"
      :label="item.cate_zh"
      :value="item.cate">
    </el-option>
  </el-select>

  <div class="table">
    <el-table
      :data="goodList"
      border
      style="width: 100%">
      <el-table-column
        prop="name"
        label="商品名称"
        align='center'
        width="100">
      </el-table-column>
      <el-table-column
        prop="name"
        label="图片"
        align='center'
        width="120">
        <template slot-scope="scope">
          <img :src="scope.row.img" style="width:50px ;height:50px " alt="111" />
        </template>
      </el-table-column>
      <el-table-column
        prop="cate"
        align='center'
        label="品类"
        width="100">
      </el-table-column>
      <el-table-column
        prop="price"
        label="价格"
        align='center'
        width="100">
        <template slot-scope='scope'>
          <span v-text='"￥"+scope.row.price'></span>
        </template>
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="上架时间"
        align='center'
        width="120">
      </el-table-column>
      <el-table-column
        prop="hot"
        label="是否热销"
        align='center'
        width="100">
        <template slot-scope='scope'>
          <span v-text='scope.row.hot ? "是" : "否"'></span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope" >
          <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
          <el-button type="text" size="small" >编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
</div> 


</template>

<script>

import moment from 'moment'

export default {
    data() {
      return {
        cates:[] ,
        cate:''   ,
        page:1,
        size:3,
        goodList:[],
           
      }
    },
   /*  watch:{
      cate:function(){
        this.page=1
        this.getList()
      }
    }, */
    mounted(){
      this.getList()
      this.$http.getCates({}).then(res=>{
        res.unshift({cate:'',cate_zh:'全部品类'})
        console.log('筛选',res)
        this.cates = res
      })
    },
    methods:{
      getList(){
        let params = {
          size:10,
          page:this.page,
          cate:this.cate,   
        }
        this.$http.getHotGoodList(params).then(res=>{
          console.log('获取到了',res)
          res.map((ele,idx)=>{
             res[idx].create_time = moment(ele.create_time).format('YYYY-MM-DD')
          })
         
          this.goodList = res
        })
      },
      change(val){
        this.cate=val
        this.page=1
        this.getList()
      },
        handleClick(){

        },
        
    }
}

</script>
<style lang="scss">
    .good {
  background: white;
  .filter {
    padding: 15px 15px;
  }
  .table {
    padding: 15px;
    max-width: 800px;
  }
  .page {
    text-align: right;
    padding-top: 15px;
  }
  .img {
    display: inline-block;
    width: 80px;
    height: 80px;
  }
}
</style>